<template>
  <el-dialog
    :visible="isShowDialog"
    title="新增"
    :close-on-click-modal="false"
    @close="btnCancel"
  >
    <el-form ref="formData" :model="formData" label-width="100px" :rules="rules">
      <el-form-item label="分类">
        <el-select v-model="formData.category.id" placeholder="请选择">
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="经纪">
        <el-select v-model="formData.agent.id" placeholder="请选择">
          <el-option
            v-for="item in agentList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" />
      </el-form-item>
      <el-form-item label="标签">
        <el-tag
          v-for="tag in formData.tags"
          :key="tag"
          closable
          @close="closeTag(tag)"
        >{{ tag }}</el-tag>
        <el-input
          v-if="inputVisible"
          ref="tagInput"
          v-model="tagInp"
          size="small"
          style="width: 50px"
          @blur="addTag"
          @keyup.enter.native="addTag"
        />
        <el-button v-else size="small" @click="showTagInput">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="地址">
        <el-row type="flex">
          <el-cascader
            :value="checkaddress"
            :props="{label:'name',children:'districts',value:'name'}"
            :options="districtsList"
            placeholder="选择地区"
            @change="addressChange"
          />
          <el-input v-model="formData.address" disabled />
        </el-row>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="formData.price" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" type="textarea" resize="none" />
      </el-form-item>
      <el-form-item label="内容">
        <VueEditor v-model="formData.content" />
      </el-form-item>
      <el-form-item label="介绍图片">
        <ImgUpload ref="photos" :img-num="true" />
      </el-form-item>
      <el-form-item label="封面">
        <ImgUpload ref="images" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="btnCancel">取 消</el-button>
      <el-button type="primary" :disabled="clickBtn" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueEditor } from 'vue2-editor'
import ImgUpload from '@/components/ImgUpload'
import { addProperty, editProperty, getAddressData, getPropertyDetail } from '@/api/property'
export default {
  components: { VueEditor, ImgUpload },
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    // eslint-disable-next-line vue/require-default-prop
    cateList: {
      type: Array,
      require: true
    },
    // eslint-disable-next-line vue/require-default-prop
    agentList: {
      type: Array,
      require: true
    },
    clickBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formData: {
        category: { id: '' },
        agent: { id: '' },
        desc: '',
        title: '',
        image: '',
        content: '',
        price: '',
        address: '',
        photos: [],
        tags: []
      },
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' }
        ]
      },
      inputVisible: false,
      tagInp: '',
      districtsList: [],
      checkaddress: []
    }
  },
  async created() {
    const res = await getAddressData()
    const arr = res.data.districts[0].districts
    this.districtsList = this.delNullArr(arr)
  },
  methods: {
    btnCancel() {
      this.$emit('update:isShowDialog', false)
      this.$emit('update:clickBtn', true)
      this.formData = {
        category: { id: '' },
        agent: { id: '' },
        desc: '',
        title: '',
        image: '',
        content: '',
        price: '',
        address: '',
        photos: '',
        tags: []
      }
      this.$refs.photos.fileList = []
      this.$refs.images.fileList = []
      this.$refs.formData.resetFields()
    },
    showTagInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.tagInput.focus()
      })
    },
    addTag() {
      const val = this.tagInp
      if (val) {
        this.formData.tags.push(val)
      }
      this.inputVisible = false
      this.tagInp = ''
    },
    closeTag(tag) {
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1)
    },
    // 地址选择
    addressChange(val) {
      this.formData.address = val.join(',')
      // 清空多选框中的值
      this.checkaddress = []
    },
    // 清除地区的空数组
    delNullArr(arr) {
      arr.forEach(item => {
        if (item.districts) {
          if (item.districts.length === 0) {
            delete item.districts
            return item
          }
          this.delNullArr(item.districts)
        }
      })
      return arr
    },
    // 回显数据
    async getProDetail(id) {
      const { data } = await getPropertyDetail(id)
      this.formData = data
      if (!this.formData.tags) { this.formData.tags = [] }
      if (data.photos) {
        data.photos.forEach(img => this.$refs.photos.fileList.push({ url: img }))
      }
      this.$refs.images.fileList.push({ url: data.image })
    },
    // 确定按钮
    async btnOk() {
      await this.$refs.formData.validate()
      this.$emit('update:clickBtn', true)
      const photos = this.$refs.photos.fileList
      const images = this.$refs.images.fileList
      this.formData.photos = []
      if (photos.length > 0) { photos.forEach(img => this.formData.photos.push(img.url)) }
      images[0] ? this.formData.image = images[0].url : ''
      if (this.formData.id) {
        await editProperty(this.formData)
      } else {
        await addProperty(this.formData)
      }
      this.$message.success('操作成功')
      this.btnCancel()
      this.$emit('update:clickBtn', false)
      this.$emit('updataProList')
    }
  }
}
</script>

<style>
</style>
